<script setup lang="tsx">
import { computed, ref, watch } from "vue";
import { NSelect, NLayout, NLayoutHeader, NLayoutContent, NInputNumber, NButton,NSpace } from 'naive-ui'
import { useMessage } from 'naive-ui'
const services = [
  {
    label: 'picsum.photos(背景图)',
    value: 'https://picsum.photos/{w}/{h}',
    tips: '可以后面添加 /{number} 在同一页面获取不同的随机图片'
  },
  {
    label: 'placebear.com(熊图片)',
    value: 'https://placebear.com/{w}/{h}'
  },
  {
    label: 'temp.im(占位图)',
    value: 'https://temp.im/{w}x{h}'
  },
  {
    label: 'dummyimage.com(占位图)',
    value: 'https://dummyimage.com/{w}x{h}'
  }
]
const service = ref(services[0].value)
const width = ref(800)
const height = ref(600)
const imageUrl = computed(() => service.value.replace('{w}', width.value).replace('{h}', height.value))
const message = useMessage()


const copyUrl = () => {
  if (imageUrl.value) {
    navigator.clipboard.writeText(imageUrl.value).then(() => {
      message.success('复制成功');
    });
  }
}

const showTips = () => {
  const item = services.find(item => item.value === service.value)
  if (item?.tips) {
    message.info(item.tips)
  }
}
</script>
<template>
  <div class="p-4">
    <n-layout content-class="h-full overflow-hidden flex flex-col">
      <n-layout-header bordered>
        <div class="flex items-center justify-between p-2">
          <div class="text-lg font-bold">图片资源</div>
          <NSpace class="items-center">
            <div >服务商:</div>
            <n-select style="width: 200px;" v-model:value="service" :options="services" />
            <NInputNumber v-model:value="width" class="w-26" />
            <div>x</div>
            <NInputNumber v-model:value="height" class="w-26" />
            <NButton @click="showTips" v-if="services.find(item => item.value === service)?.tips">更多参数</NButton>
            <NButton @click="copyUrl">复制链接</NButton>
          </NSpace>

        </div>
      </n-layout-header>
      <n-layout-content content-style="padding: 24px;" content-class="flex-1 overflow-y-auto">
        <img :src="imageUrl" alt="" />
      </n-layout-content>
    </n-layout>
  </div>
</template>
<style lang="less" scoped></style>
